<template>
  <div style="width: 100%; height: 100vh;">
    <!--总的统计-->
    <div style="width: 100%; height: 10%; margin-top: 20px;display: flex;">
      <div style="flex: 2; margin-left: 10%; margin-right: 20px; padding-top: 5px; background-color: #fafafa; border-radius: 10px; box-shadow: 0 2px 4px rgba(0,0,0,.14);">
        <span style=" font-size: 20px; font-weight: bold;color: cornflowerblue;">系统商家数量</span>
        <div style="font-size: 20px; font-weight: bold;color: cornflowerblue">{{ this.shoppernumber }}</div>
      </div>
      <div style="flex: 1"></div>
      <div style="flex: 2; margin-left: 10px; margin-right: 10px; padding-top: 5px; background-color: #fafafa; border-radius: 10px; box-shadow: 0 2px 4px rgba(0,0,0,.14);">
        <span style="font-size: 20px; font-weight: bold;color: cornflowerblue;">系统树苗数量</span>
        <div style="font-size: 20px; font-weight: bold;color: cornflowerblue;">{{ this.treenumber }}</div>
      </div>
      <div style="flex: 1"></div>
      <div style="flex: 2; margin-left: 20px; margin-right: 10%; padding-top: 5px; background-color: #fafafa; border-radius: 10px; box-shadow: 0 2px 4px rgba(0,0,0,.14);">
        <span style="font-size: 20px; font-weight: bold;color: cornflowerblue;">系统树苗种类</span>
        <div style="font-size: 20px; font-weight: bold;color: cornflowerblue;">{{ this.typenumber }}</div>
      </div>
    </div>
    <!--分类统计-->
    <div style="width: 99%; height: 82%; margin: 50px 10px;">
      <!--上2-->
      <div style="width: 100%; height: 50%; display: flex; margin-bottom: 5px;">
        <div style="flex: 5; margin-right: 5px;">
          <div id="treenumberchart" style="width: 100%;height: 300px;"></div>
        </div>
        <div style="flex: 5; margin-left: 5px;">
          <div id="typepie" style="width: 100%;height: 300px;"></div>
        </div>
      </div>
      <!--下2-->
      <div style="width: 100%; height: 50%; display: flex; margin-top: 5px;">
        <div style="flex: 5; margin-right: 5px;">
          <div id="treepricelinechart" style="width: 100%;height: 300px;"></div>
        </div>
        <div style="flex: 5; margin-left: 5px;">
          <div id="mytreepie" style="width: 100%;height: 300px;"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import request from "@/utils/request";

export default {
  name: 'businesshomeview',
  data() {
    return {
      user: sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {},
      shoppernumber: 0,
      treenumber: 0,
      typenumber: 0,
      usertreelist: [],
      systemtreelist: [],
      avgpricelist: [],
      personalpricelist: []
    }
  },
  mounted() {
    this.loadEcharts();
  },
  created() {
    this.loadshoppernumber();
    this.loadtreenumber();
    this.loadtypenumber();
  },
  methods: {
    loadshoppernumber() {
      request.get("user/loadshoppernumber").then(res => {
        if (res.code === '0') {
          this.shoppernumber = res.data;
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    loadtreenumber() {
      request.get("tree/loadtreenumber").then(res => {
        if (res.code === '0') {
          this.treenumber = res.data;
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    loadtypenumber() {
      request.get("tree/loadtypenumber").then(res => {
        if (res.code === '0') {
          this.typenumber = res.data;
        } else {
          this.$message.error(res.msg)
        }
      })
    },

    loadEcharts() {
      let myChart1 = echarts.init(document.getElementById('treenumberchart'));
      let myChart2 = echarts.init(document.getElementById('typepie'));
      let myChart3 = echarts.init(document.getElementById('treepricelinechart'));
      let myChart4 = echarts.init(document.getElementById('mytreepie'));

      request.post('/tree/echarts/data/' + this.user.username).then(res => {
        if (res.code === '0') {
          this.systreenumlist = res.data.systemtreelist
          this.usertreelist = res.data.usertreelist
          this.avgpricelist = res.data.avgpricelist
          this.personalpricelist = res.data.personalpricelist

          // 柱状图
          let option1 = {
            title: {
              text: '树苗数量统计'
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            legend: {},
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'value',
            },
            yAxis: {
              type: 'category',
              data: ['常绿乔木类', '常绿灌木类', '落叶乔木类', '落叶灌木类', '果树苗木类', '绿化苗木类', '盆景绿植类', '彩叶苗木类', '其他苗木类']
            },
            series: [
              {
                name: '个人数量',
                type: 'bar',
                data: this.usertreelist
              },
              {
                name: '系统数量',
                type: 'bar',
                data: this.systreenumlist
              }
            ]
          }

          let option2 = {
            title: {
              text: '树苗种类对比',
              subtext: '分类统计',
              left: 'center'
            },
            tooltip: {
              trigger: 'item'
            },
            legend: {
              orient: 'vertical',
              left: 'left'
            },
            series: [
              {
                name: '种类数量',
                type: 'pie',
                radius: '50%',
                data: [
                  {value: this.systreenumlist[0], name: '常绿乔木类'},
                  {value: this.systreenumlist[1], name: '常绿灌木类'},
                  {value: this.systreenumlist[2], name: '落叶乔木类'},
                  {value: this.systreenumlist[3], name: '落叶灌木类'},
                  {value: this.systreenumlist[4], name: '果树苗木类'},
                  {value: this.systreenumlist[5], name: '绿化苗木类'},
                  {value: this.systreenumlist[6], name: '盆景绿植类'},
                  {value: this.systreenumlist[7], name: '彩叶苗木类'},
                  {value: this.systreenumlist[8], name: '其他苗木类'},
                ],
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          };

          let option3 = {
            title: {
              text: '树苗价格对比'
            },
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: ['系统均价', '个人价格']
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: ['常绿乔木类', '常绿灌木类', '落叶乔木类', '落叶灌木类', '果树苗木类', '绿化苗木类', '盆景绿植类', '彩叶苗木类', '其他苗木类']
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                name: '系统均价',
                type: 'line',
                data: this.avgpricelist
              },
              {
                name: '个人价格',
                type: 'line',
                data: this.personalpricelist
              }
            ]
          };

          let option4 = {
            title: {
              text: '个人上架情况',
              subtext: '分类统计',
              left: 'center'
            },
            tooltip: {
              trigger: 'item'
            },
            legend: {
              orient: 'vertical',
              left: 'left'
            },
            series: [
              {
                name: '上架数量',
                type: 'pie',
                radius: '50%',
                data: [
                  {value: this.usertreelist[0], name: '常绿乔木类'},
                  {value: this.usertreelist[1], name: '常绿灌木类'},
                  {value: this.usertreelist[2], name: '落叶乔木类'},
                  {value: this.usertreelist[3], name: '落叶灌木类'},
                  {value: this.usertreelist[4], name: '果树苗木类'},
                  {value: this.usertreelist[5], name: '绿化苗木类'},
                  {value: this.usertreelist[6], name: '盆景绿植类'},
                  {value: this.usertreelist[7], name: '彩叶苗木类'},
                  {value: this.usertreelist[8], name: '其他苗木类'},
                ],
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          };
          myChart1.setOption(option1);
          myChart2.setOption(option2);
          myChart3.setOption(option3);
          myChart4.setOption(option4);
        }
      })
    },
  }
}
</script>
